<template>
  <div
    class="cardWrapper"
    id="menuScroll0-0"
    v-if="careerIntroductionData.length"
  >
    <div class="cardTitleContainer">
      <img
        src="https://img3.job1001.com/data_center/images/position_item_icon.png"
        alt="Icon"
        class="position_item_icon"
      />
      <div class="cardTitle">{{ '职业简介' }}</div>
      <template v-if="positionInfo.currentEdit">
        <el-input
          size="mini"
          class="introduceJobInput"
          v-model="positionInfo.positionDesc"
          placeholder="请输入一句话介绍此职业"
        ></el-input>
      </template>
      <template v-else>
        <div class="introduceJob" :title="positionInfo.positionDesc">
          {{ positionInfo.positionDesc }}
        </div>
      </template>
      <!-- <div class="contentItemEditAndAIBtn AIBtn" @click="aiCreate()">
        <img src="@/assets/detail/AI.png" />
        {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
      </div>
      <div class="contentItemEditAndAIBtn" @click="editCurrent(positionInfo, index)">
        <img src="@/assets/detail/edit.png" />
        {{ positionInfo.currentEdit ? "退出编辑" : "编辑" }}
      </div> -->
    </div>
    <div class="positionItemList">
      <el-row
        class="demo-autocomplete"
        :key="index"
        v-for="(item, index) in positionItemList"
      >
        <div class="demo-autocomplete-content">
          <div class="controlLine" :id="'scroll0-' + index">
            <span class="tinyTitle">
              <div class="titleFlag"></div>
              {{ item.title }}
            </span>
            <div class="line" v-if="(!index == 0) & !item.currentEdit"></div>
            <div class="saveBtns" v-if="!isSuperToken && false">
              <div
                class="contentItemEditAndAIBtn AIBtn"
                @click="aiCreate(item, index, item.title)"
              >
                <img src="@/assets/detail/AI.png" />
                {{ aiCreateStatus ? 'AI正在生成中 . . .' : 'AI生成' }}
              </div>
              <div
                class="contentItemEditAndAIBtn"
                @click="editCurrent(item, index)"
              >
                <img src="@/assets/detail/edit.png" />
                {{ item.currentEdit ? '退出编辑' : '编辑' }}
              </div>
              <div
                class="contentItemEditAndAIBtn"
                @click="save(item, index)"
                v-if="isAdmin == true && item.currentEdit && editAll"
              >
                <img src="@/assets/detail/save.png" />保存
              </div>
              <button
                class="rightBtn saveAllBtn"
                @click="save(item, index)"
                v-if="isAdmin && !editAll && item.currentEdit"
              >
                保存
              </button>
            </div>
          </div>
          <!-- 未编辑状态下 -->
          <div class="editBox" v-if="!item.currentEdit">
            <div
              v-if="
                item.data != '' &&
                item.title != '职业其他名称' &&
                item.title != '相近职业' &&
                item.title !== '对口专业'
              "
              v-html="handleLayerContent(item.data)"
              class="aiContent"
            ></div>
            <div
              v-if="item.title == '职业其他名称'"
              :class="{ otherNameContainer: true }"
            >
              <template v-for="(item, index) in item.data">
                <div class="otherName" :key="index">
                  {{ item.layerValue }}
                </div>
              </template>
            </div>
            <div v-if="item.title == '相近职业'" class="similerContainer">
              <template v-for="(item, index) in item.data">
                <div class="similer" :key="index">
                  {{ item.layerValue }}
                </div>
              </template>
            </div>
            <div v-if="item.title == '对口专业'" class="otherNameContainer">
              <template v-for="(item, index) in item.data">
                <div class="otherName" :key="index">
                  {{
                    item.layerValue
                      ? item.description + '  ' + item.layerValue
                      : item.tagName
                  }}{{ `（${getCateTypeName(item.cateType)}）` }}
                </div>
              </template>
            </div>
            <div
              v-if="item.extendContent && item.extendContent.length > 0"
              class="editBoxRight noEdit"
            >
              <div
                class="extendsItem"
                v-for="(item_item, item_index) in item.extendContent"
                v-html="item_item"
                :key="item_index"
              ></div>
            </div>
          </div>
          <!-- 编辑文字的 -->
          <div class="editBox" v-if="item.currentEdit && !item.listContent">
            <div class="editBoxLeft">
              <el-input
                v-model="item.allContent"
                type="textarea"
                autosize
                :rows="10"
                placeholder="请输入内容"
                clearable
                resize="none"
                key="extend"
              />
              <div class="deleteContent" @click="deleteContent(item, index)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <div
              class="editBoxRight"
              v-if="item.extendContent && item.extendContent.length > 0"
            >
              <div
                v-for="(item_item, item_index) in item.extendContent"
                class="extendsItem"
                :key="item_index"
              >
                <div v-html="item_item"></div>
                <div
                  class="replaceByOne"
                  @click="replaceByOne(item, item_item, index)"
                >
                  一键替换
                </div>
              </div>
            </div>
          </div>
          <!-- 编辑一条一条的 -->
          <div class="editBox" v-if="item.currentEdit && item.listContent">
            <div class="editBoxLeft">
              <div class="fakeTextArea">
                <div
                  class="listContentItem"
                  v-for="(_item, _index) in item.listContent"
                  :key="_item.questionId + '' + _index"
                >
                  <el-input
                    type="textarea"
                    :key="_item.questionId + '' + _index"
                    v-model="_item.layerValue"
                    autosize
                    :rows="2"
                    placeholder="请输入内容"
                    clearable
                    resize="none"
                  >
                  </el-input>
                  <div class="deleteListContent">
                    <img
                      src="https://img3.job1001.com/data_center/images/decreaceListItem.svg"
                      class="decreaceListItem"
                      @click="
                        deeleteListContentItem(item, _item, index, _index)
                      "
                    />
                  </div>
                </div>
                <button
                  class="addListContentBtn"
                  @click="addListContentItem(item)"
                >
                  新增
                </button>
              </div>
              <div class="deleteContent" @click="deleteListContent(item)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <div
              class="editBoxRight"
              v-if="item.extendContent && item.extendContent.length"
            >
              <div
                v-for="(item_item, item_index) in item.extendContent"
                class="extendsItem"
                :key="item_index"
              >
                <div v-html="item_item"></div>
                <div
                  class="replaceByOne"
                  @click="replaceByOne(item, item_item, index)"
                >
                  一键替换
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="positionAvatarAndVideo"
          v-if="(index == 0) & !item.currentEdit"
        >
          <div class="positionAvatar">
            <img :src="backImage" class="positionAvatarBG" />
            <img :src="positionInfo.positionPic" alt="" class="positionPic" />
            <img
              src="https://img3.job1001.com/data_center/images/avatarFlow.png"
              v-if="!playlist || !playlist.length"
              alt=""
              class="avatarFlow"
            />
          </div>
          <div class="playlistContainer" v-if="playlist && playlist.length">
            <div
              class="playlistItem"
              v-for="(item, index) in playlist"
              :key="index"
              @click="handleContentClick(item)"
            >
              <img :src="item.picture" alt="" />
              <div class="playlistItemName">{{ item.videoName }}</div>
            </div>
          </div>
        </div>
      </el-row>
    </div>
    <websocket ref="child" @initMessageBack="initMessageBack" />
    <videoPlayerDialog
      v-if="videoPlayerVisible"
      :dialogVisible.sync="videoPlayerVisible"
      :mediaSrc="mediaSrc"
      :playingVideoId.sync="playingVideoId"
      @refreshOuterVideoList="reqGetPlaylist"
    />
  </div>
</template>

<script>
import {
  saveAnswerInfo,
  homepageInfo,
  homepageQuestion,
  valueListUpdate,
  valueListAnalysis
} from '@/api/position-detail';
import { addLog } from '@/api/position';
import { operateSave } from '@/api/data';
import Websocket from '@/components/Websocket';
import VueCookies from 'vue-cookies';
import defaultPositionBG from '@/assets/detail/defaultPositionBG.png';
import { campusVideos } from '@/api/mine.js';
import videoPlayerDialog from '@/components/videoPlayerDialog';
export default {
  name: 'careerIntroduction',
  props: {
    careerIntroductionData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      playingVideoId: '',
      mediaSrc: '',
      videoPlayerVisible: false,
      playlist: '',
      positionItemList: [],
      positionId: '',
      positionName: '',
      positionInfo: {
        introduceJob: '清输入一句话介绍此职业',
        currentEdit: false,
        positionPic: ''
      },
      selectedNav: 0, //右边导航栏
      editData: {}, //右下角数据
      messages: [], //chatGPT的消息记录
      topId: null, //用来请求详情
      // 以下是一些没见过的参数
      isAdmin: true, //为true才可以保存，基础版默认为true
      editAll: false,
      aiCreateStatus: false,
      isSuperToken: false,
      collectStatus: false, //是否收藏
      specialHidden: false,
      isClickScroll: false,
      //默认一个背景吧
      backImage: defaultPositionBG,
      cateTypeOptions: [
        { name: '高职专科', value: 10 },
        { name: '高职本科', value: 20 },
        { name: '普通本科', value: 30 },
        { name: '中专', value: 40 },
        { name: '硕士', value: 50 }
      ]
    };
  },
  watch: {
    careerIntroductionData: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.positionItemList = newValue;
        }
      },
      immediate: true
    }
  },
  methods: {
    getCateTypeName(val) {
      if (!val) return '学历未知';
      return this.cateTypeOptions.find((item) => item.value === val).name;
    },
    handleContentClick(item, index) {
      this.mediaSrc = item.playUrl;
      this.playingVideoId = item.videoId;
      this.videoPlayerVisible = true;
    },
    reqGetPlaylist() {
      const params = {
        positionId: this.$route.query.id
      };
      campusVideos(params)
        .then((res) => {
          if (res.code == 200) {
            this.playlist = res.data.splice(0, 3);
            //横向滚动
            this.$nextTick(() => {
              const scrollContainer =
                document.querySelector('.playlistContainer');
              if (!scrollContainer) return;
              scrollContainer.removeEventListener('wheel', (event) => {
                event.preventDefault();
                scrollContainer.scrollLeft += event.deltaY;
              });
              scrollContainer.addEventListener('wheel', (event) => {
                event.preventDefault();
                scrollContainer.scrollLeft += event.deltaY;
              });
            });
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {});
    },
    //删文字的
    deleteContent(item) {
      item.allContent = '';
    },
    //删全部
    deleteListContent(item) {
      item.listContent = [];
    },
    //删一个
    deeleteListContentItem(item, _item, index, _index) {
      item.listContent.splice(_index, 1);
    },
    addListContentItem(item) {
      //console.log("item", item);
      const layerKey = item.listContent[0] && item.listContent[0].layerKey;
      item.listContent.push({
        layerValue: '',
        layerKey
      });
    },
    handleLayerContent(data) {
      //主要工作任务
      if (data instanceof Array) {
        let content = '';
        data.forEach((item, index) => {
          content += index + 1 + '. ' + item.layerValue + '<br />';
        });
        return content;
      }

      if (data instanceof Object) {
        return (data.answer && data.answer.answerContent) || '待补充';
      }
    },
    reqGetHomepageInfo() {
      const params = {
        id: this.positionId
      };
      homepageInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.positionInfo = res.data;
            // //console.log("this.positionInfo", this.positionInfo);
          }
        })
        .catch((err) => {
          //console.log("err", err);
          this.$message.error('服务器开小差啦');
        });
    },
    replaceByOne(item, _item, index) {
      //console.log("item, _item, index", item, _item, index);

      //有listContent为数组就是编辑多条的的
      if (item.listContent instanceof Array) {
        const params = {
          questionContent: _item,
          id: item.questionId,
          ylPositionId: this.positionId
        };
        valueListAnalysis(params).then((res) => {
          if (res.code == 200) {
            item.listContent = res.data;
            //console.log("replaceByOne", item);
          } else {
            //console.log("内容解析失败了！请尝试重新生成！");
          }
        });
      } else {
        let itemReplaced = _item.replace(/<br>/g, '\n');
        item.allContent = itemReplaced;
      }
    },
    //单个编辑
    editCurrent(item, index) {
      //console.log("editCurrent", item);

      if (item.currentEdit) {
        if (
          item.data.answer &&
          item.allContent ==
            item.data.answer.answerContent.replace(/<br>/g, '\n')
        ) {
          this.positionItemList[index].currentEdit = !item.currentEdit;
        } else {
          this.$confirm('此操作将不保存已修改内容, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.positionItemList[index].currentEdit = !item.currentEdit;
            if (item.data instanceof Array) {
              this.$set(this.positionItemList[index], 'listContent', [
                ...item.data
              ]);
            } else {
              //如果是直接展示文字的
              console.log(
                'this.positionItemList[index]',
                this.positionItemList[index]
              );
              const answer = item.data.answer;
              //console.log("answer", answer);

              this.positionItemList[index].allContent = answer
                ? answer.answerContent.replace(/<br>/g, '\n')
                : '';
            }
          });
        }
      } else {
        this.$set(
          this.positionItemList[index],
          'currentEdit',
          !item.currentEdit
        );
        if (item.data instanceof Array) {
          this.$set(this.positionItemList[index], 'listContent', [
            ...item.data
          ]);
        } else {
          //如果是直接展示文字的
          const answer = item.data.answer;
          this.$set(
            this.positionItemList[index],
            'allContent',
            answer ? answer.answerContent.replace(/<br>/g, '\n') : '待补充'
          );
        }
      }
    },
    //单个保存
    save(item, columnIndex) {
      //console.log("save", item);
      //有allContent就是直接编辑文字的
      if (item.allContent) {
        if (
          item.allContent ==
          (item.data.answer &&
            item.data.answer.answerContent.replace(/<br>/g, '\n'))
        ) {
          this.$message({
            type: 'success',
            message: '修改信息无变化!'
          });
          item.extendContent = [];
          item.currentEdit = false;
        } else {
          this.$confirm('此操作将覆盖原有内容, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.positionId = this.$route.query.id;
              const params = {
                ylPositionId: this.positionId
              };
              params.questionId = item.questionId;
              params.answerContent = item.allContent;
              saveAnswerInfo(params).then((response) => {
                if (!item.data.answer) {
                  item.data.answer = {};
                }
                item.data.answer.answerContent = item.allContent.replace(
                  /\n/g,
                  '<br>'
                );
                item.extendContent = [];
              });
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              item.currentEdit = false;

              item.extendContent = [];
            })
            .catch(() => {
              this.$message({
                type: 'positionItemList',
                message: '已取消修改'
              });
            });
        }
      } else {
        this.$confirm('确定要保存吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            id: item.questionId,
            ylPositionId: this.positionId,
            questionContent: item.listContent
              .map((item) => {
                return item.layerValue;
              })
              .join('、')
          };
          valueListUpdate(params).then((res) => {
            item.data = res.data;
            item.extendContent = [];
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            item.currentEdit = false;
          });
        });
      }
    },
    async aiCreate(item, columnIndex, columnName) {
      //console.log("aiCreate", item);

      if (this.aiCreateStatus) {
        this.$message({
          type: 'warning',
          message:
            '已有AI正在生成中，等待生成内容结束或F5刷新页面再次点击AI生成!'
        });
        return;
      } else {
        this.aiCreateStatus = true;
        let textEl = document.querySelectorAll('.AIBtn'); // 获取要添加省略号的元素
        textEl.forEach((item) => {
          item.classList.add('AILoading'); // 添加类名，启动动画效果
        });
      }
      const name =
        this.$route.query.name != undefined ? this.$route.query.name : '';
      if (item.data.questionContent) {
        this.chatKey = item.data.questionContent.replace(/{}/g, name);
      } else {
        const questionRes = await this.reqGetQuestionbyId(item.questionId);
        this.chatKey = questionRes.data.questionContent.replace(/{}/g, name);
      }

      this.currentButton = columnIndex;
      // item.content = "";

      this.messages.push({
        role: 'user',
        content: this.chatKey
      });
      // console.log('AI')
      const agentData = {
        userId: '',
        userName: '',
        messages: this.messages
      };
      this.messages = [];
      this.sendMsg = JSON.stringify(agentData);
      if (!item.extendContent) {
        this.$set(item, 'extendContent', []);
      }
      this.$set(item.extendContent, item.extendContent.length, '');
      this.$refs.child.send(this.sendMsg, this.initMessageBack, this.wsError);
      this.$message.success({
        message: 'AI生成内容中...',
        offset: '400'
      });
      addLog({ logType: '10' });
      operateSave({
        ylPositionId: this.positionId,
        description: `AI生成-${columnName}`
      });
    },
    //有的他妈的纬度不会给问题 还要自己请求一下获取问题
    reqGetQuestionbyId(questionId) {
      return homepageQuestion({ questionId });
    },
    adminInit() {
      const userToken = VueCookies.get('vue_admin_template_token');
      // console.log(userToken)
      if (userToken === 'admin-token') {
        this.isAdmin = true;
      }
    },
    initMessageBack(res) {
      this.loading = true;
      if (res === 'err') {
        this.loading = false;
        return;
        // (this.showError = true);
      }
      const msg = res.choices && res.choices[0];
      if (!this.currentRole) {
        this.currentRole = msg.delta.role;
      }
      if (msg.delta.role === 'assistant') {
        return;
      }
      if (msg.finish_reason === 'stop' || msg.finish_reason === 'done') {
        this.loading = false;
        // this.currentMsg = "";
        this.currentRole = '';
        this.aiCreateStatus = false;
        let textEl = document.querySelectorAll('.AIBtn');
        textEl.forEach((item) => {
          item.classList.remove('AILoading');
        });
        // this.positionItemList[this.currentButton].extendContent;
        //  += "<br>";
        return;
      }
      if (msg.delta.content) {
        var tempStr = msg.delta.content;
        if (tempStr) {
          tempStr = tempStr.replace(/(\r\n|\n|\r)+/g, '<br>');
        }
        let len = this.positionItemList[this.currentButton].extendContent
          ? this.positionItemList[this.currentButton].extendContent.length - 1
          : 0;
        this.$set(
          this.positionItemList[this.currentButton].extendContent,
          len,
          (this.positionItemList[this.currentButton].extendContent[len] +=
            tempStr)
        );
      }
    },
    wsError() {
      if (this.isStoped) {
        this.isContinue = false;
      } else {
        this.isContinue = true;
      }
      //console.log("连接失败，请重试");
    }
  },
  created() {
    this.positionId = this.$route.query.id;
    this.positionName = this.$route.query.name;
    this.reqGetHomepageInfo();
    //从外面带进来的才要
    const fromBackImage = sessionStorage.getItem('backImage');
    if (fromBackImage) {
      this.backImage = fromBackImage;
    }
    const extraStr = localStorage.getItem('extra');
    let extraObj = null;
    if (extraStr) {
      extraObj = JSON.parse(extraStr);
    }
    if (extraObj && extraObj.show_video) {
      this.reqGetPlaylist();
    }
  },
  mounted() {
    this.isSuperToken =
      localStorage.getItem('superToken') ==
        '407404EAEC845F1B91A104B80FE86D89' ||
      localStorage.getItem('superToken') == '5FD271D8A0AA315DD218801C0C3A0DEA';
    if (
      this.$route.query.superToken == '407404EAEC845F1B91A104B80FE86D89' ||
      this.$route.query.superToken == '5FD271D8A0AA315DD218801C0C3A0DEA'
    ) {
      this.specialHidden = false;
    }
    // this.fetchData()
    //不知道监听什么历史代码
    window.addEventListener('click', this.listenerChangeFlag);
  },
  components: {
    Websocket,
    videoPlayerDialog
  }
};
</script>

<style lang="scss" scoped>
.cardWrapper {
  position: relative;
  min-width: 800px;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  background-size: 110% 219px;
  background-clip: padding-box;
  background-position: -10px -10px;
  background-image: url('https://img3.job1001.com/data_center/images/salary_bg.png');
  background-repeat: no-repeat;
  padding: 20px;
  padding-bottom: 5px;

  margin-bottom: 14px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
  .cardTitleContainer {
    display: flex;
    align-items: center;
    // position: sticky;
    top: 0;
    margin-bottom: 16px;
    height: 40px;
    flex: 1;
    .cardTitle {
      min-width: 88px;
      height: 30px;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 30px;
      margin-right: 15px;
    }
    .introduceJobInput {
      width: 400px;
    }
    .introduceJob {
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 21px;
      margin-right: 16px;
      cursor: pointer; /* 鼠标悬停时显示为手型光标 */
      white-space: normal; /* 不换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
      // max-width: 720px;
      // max-width: 100%;
      // width: 100%;
    }
    .position_item_icon {
      width: 39px;
      height: 40px;
      margin-right: 13px;
    }
  }

  .positionItemList {
    .demo-autocomplete {
      display: flex;
      &:last-of-type {
        .editBox {
          margin-bottom: 0px;
        }
      }
      .demo-autocomplete-content {
        flex: 1;
      }
      .positionAvatarAndVideo {
        position: relative;
        display: flex;
        max-width: 391px;
        height: 137px;
        // top: -34px;
        margin-left: 111px;
        // right: -20px;
        .positionAvatar {
          display: flex;
          width: 140px;
          height: 137px;
          border-radius: 16px;
          // opacity: 0.77;
          background-color: white;
          z-index: 4;
          background-size: auto 100%;
          background-repeat: no-repeat;
          // margin-left: 42px;
          padding: 21px 5px 0px 5px;
          margin-right: 8px;
          .positionAvatarBG {
            position: absolute;
            width: 140px;
            height: 137px;
            // width: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 16px;
            z-index: 2;
          }
          .avatarFlow {
            position: relative;
            width: 79px;
            height: 63px;
            margin-top: -51.5px;
            margin-left: -63px;
            z-index: 1;
          }
          .positionPic {
            width: 100%;
            height: auto;
            // height: 137px;
            border-radius: 16px;
            z-index: 3;
          }
        }
        .playlistContainer {
          display: flex;
          width: 170px;
          height: 160px;
          overflow-x: scroll;
          overflow-y: hidden;
          .playlistItem {
            position: relative;
            width: 217.64px;
            height: 137px;
            margin-right: 10px;
            cursor: pointer;
            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 32px;
              height: 29px;
              background-image: url('../../../../assets/detail/videoCoverIcon.png');
              background-repeat: no-repeat;
              background-size: 32px 29px;
            }
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 41px;
              background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.3) 100%
              );
              border-radius: 0px 0px 15px 15px;
              z-index: 1;
            }
            img {
              width: 217.64px;
              height: 137px;
              border-radius: 16px;
            }
            .playlistItemName {
              position: absolute;
              bottom: 11px;
              left: 0;
              padding: 0 13px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #fff;
              line-height: 22px;
              text-align: left;
              font-style: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-inline-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              z-index: 2;
            }
          }
          &::-webkit-scrollbar-track-piece {
            background: #dee6ec;
            border-radius: 4px;
          }

          &::-webkit-scrollbar {
            height: 6px;
            border-radius: 4px;
          }

          &::-webkit-scrollbar-thumb {
            background: #bccad5;
            border-radius: 4px;
          }
        }
      }
    }
  }

  // 以下是通用样式
  .contentItemEditAndAIBtn {
    line-height: 32px;
    margin: 0 10px 0 15px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      width: 22px;
      height: 22px;
    }
  }
  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
  .controlLine {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    .tinyTitle {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 18px;
      // margin-right: 24px;
    }
    .line {
      flex: 1;
      // height: 16px;
      margin-left: 14px;
      border-bottom: 1px solid #efefef;
    }
    .saveBtns {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      // padding-right: 10px;
      .contentItemEditAndAIBtn {
        line-height: 32px;
        margin: 0 10px 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
      }
    }
    .AILoading {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0px;
        height: 100%;
        background-color: transparent;
        animation-name: ellipsis;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
      }
    }
  }
  .editBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    margin-bottom: 52px;

    height: auto;
    min-height: auto;

    .otherNameContainer {
      display: flex;
      flex-wrap: wrap;
      // max-width: 50%;
      align-content: flex-start;
      flex: 1;
      &.inEdit {
        max-width: 50%;
      }
      .otherName {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
        border-radius: 4px;
        border: 1px solid #b2bad4;
        padding: 7px 18px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        margin-right: 18px;
        margin-bottom: 24px;
      }
    }
    .similerContainer {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      align-content: flex-start;
      &.inEdit {
        max-width: 50%;
      }
      .similer {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
        background: #edf4ff;
        border-radius: 6px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        margin-right: 18px;
        padding: 7px 18px;
        margin-bottom: 18px;
      }
    }
    .editBoxLeft {
      flex: 1;
      overflow: auto;
      position: relative;
      height: auto;
      min-height: auto;
      border: 1px solid #709cff;
      background-color: white;
      border-radius: 6px 0px 0px 6px;
      textarea {
        height: 100% !important;
      }
      .deleteContent {
        position: absolute;
        cursor: pointer;
        right: 12px;
        top: 15px;
      }
      .fakeTextArea {
        position: relative;
        background-color: white;
        // min-height: 475px;
        padding: 14px 36px 14px 27px;
        .listContentItem {
          display: flex;
          background-color: #eeeeee;
          align-items: center;
          position: relative;
          border-radius: 4px 0px 0px 4px;
          margin-bottom: 8px;
          ::v-deep.el-textarea__inner {
            position: relative;
            background-color: #eeeeee;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #555555;
            line-height: 26px;
            padding: 1px 5px 0px 6px;
            border-radius: 0;
            margin-top: 3px;
          }
          .deleteListContent {
            // position: absolute;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100%;
            background-color: #eeeeee;
            padding-right: 6px;
            margin-top: 1px;
            // padding-bottom: 8px;
            cursor: pointer;
            img {
              width: 16px;
              height: 16px;
              cursor: pointer;
            }
          }
        }
        .addListContentBtn {
          width: 100%;
          height: 32px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #4880ff;
          color: #4880ff;
          cursor: pointer;
        }
      }
    }
    .editBoxRight {
      flex: 1;
      padding: 0px 16px 0px 16px;
      background: #eaf3ff;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4b6aaf;
      line-height: 27px;
      position: relative;
      padding-bottom: 20px;
      border-radius: 0px 6px 6px 0px;
      max-width: 50%;
      height: auto;
      min-height: auto;
      .extendsItem {
        position: relative;
        padding-bottom: 35px;
        padding: 12px 0px 0px 0px;
        .replaceByOne {
          display: flex;
          justify-content: flex-end;
          position: relative;
          bottom: 0;
          right: 14px;
          cursor: pointer;
          color: #4880ff;
        }
      }
    }
    .noEdit {
      // padding: 0;
      background: transparent;
    }
  }
  .aiContent {
    flex: 1;
    height: 100%;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 27px;
    // max-width: 90%;
    word-break: break-all;
    white-space: normal;
  }
  .saveAllBtn {
    width: 57px;
    height: 26px;
    border: none;
    background: #4880ff;
    color: #ffffff;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 4px;
    margin-left: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>
